<style scoped>
    .bill .ivu-form-item{
        margin-bottom: 10px;
    }
    .bill .ivu-form-item-label{
        text-align: left;
    }
    .bill{
        padding: 0px 20px;
    }

</style>
<style>
    .bill .ivu-form-item-content{
        margin-left:0 !important;
    }
    .bill .ivu-form-item-label{
        text-align: left;
    }
    .bill .ivu-form-item-required .ivu-form-item-label{
        color:#F29333 ;
    }
    .bill .ivu-input-icon{
        border-left:1px solid #BEBEBE;
    }
    .bill .ivu-col{
        padding: 0 10px;
    }
    .bill .ivu-select:after{
        right:30px;
    }
    .bill .ivu-select-placeholder{
        padding-right:32px;
    }
    .bill .ivu-select-arrow{
        right:10px;
    }
    .bill .blue .ivu-icon-ios-search{
        background-color: #2C8BF0;
        color:#fff;
    }
    .bill .peo{
        position: relative;
    }
    .bill .title{
        position: absolute;
        top:-33px;
        left: 57px;
        color: #B3B3B3;
    }
    .billTab .ivu-tabs-tab{
        color:#3592F1;
        background-color:#FFF !important;
        border-color: #FFF !important;
    }
    .billTab .ivu-tabs-tab-active{
        color: #888888 !important;
         border: 1px solid #dddee1 !important;
        border-bottom: none !important;
    }
    .billTab .clearPadding{
        padding:0;
    }
    .billTab .ivu-tabs-bar{
        margin-left:10px;
        margin-right:10px;
    }
    .billTab .ivu-tabs-content{

    }
    #formItem3 .ivu-radio-group-item,#formItem4 .ivu-radio-group-item{
        /*line-height:30px;*/
        display: block;
        /*padding-left: 30px;*/
    }
    .bill .btnBox{
        font-size:16px;
        padding:5px 8px;
        color:#FFF;
        cursor: pointer;
    }
    .bill .add{
        background: #428CCB;
    }
    .bill .close{
        background: #F39C11;
    }
    .detail .head{
        border:1px solid #EEE;
        border-bottom:none;
        padding:10px 0;
        padding-left: 20px;
    }
    .detail .table{
        border-collapse: collapse;
        width: 100%;
        line-height: 40px;

    }
    .detail .table th{
        background-color: #F8F8F8;
    }

    .detail .table td,.detail .table th{
        border:1px solid #EEE;
        text-align: center;
    }
    .detail .table tr td:nth-child(2){
        text-align: left;
        padding-left: 15px;
    }
    .detail .table input{
        height:30px;
        line-height: 30px;
        border:1px solid #D2D2D2;
        width:90%;
    }
</style>
<template>
    <div>
        <product-title></product-title>
        <div class="bill">
            <Form :label-width="120" :model="formItem1" :rules="formItem1Valited" ref="formItem1" label-position="top" id="formItem1">
                <Row>
                    <i-col :md="24" :lg="6">
                        <FormItem label="工号" prop="num">
                            <Select v-model="formItem1.num">
                                <Option value="1">1</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="保险类型" prop="type">
                            <Select v-model="formItem1.type">
                                <Option value="1">1</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="交商同保" prop="type">
                            <Select v-model="formItem1.type">
                                <Option value="1">1</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="业务类型" prop="type">
                            <Select v-model="formItem1.type">
                                <Option value="1">1</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="签单日期" prop="type">
                            <DatePicker type="datetime" placeholder="请选择" format="yyyy年MM月dd日" :confirm="true" v-model="formItem1.date"></DatePicker>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="支付日期" prop="type">
                            <DatePicker type="datetime" placeholder="请选择" format="yyyy年MM月dd日" :confirm="true" v-model="formItem1.date"></DatePicker>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="核保日期" prop="type">
                            <DatePicker type="datetime" placeholder="请选择" format="yyyy年MM月dd日" placement="left-start" :confirm="true" v-model="formItem1.date"></DatePicker>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :md="24" :lg="6">
                        <FormItem label="保单号" prop="type">
                            <i-input icon="ios-search" class="blue">
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="6">
                        <FormItem label="总保费" prop="type">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="6">
                        <FormItem label="业务员" prop="type" class="peo">
                            <span class="title">（如列表没有可手录匹配）</span>
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="起保日期" prop="type">
                            <DatePicker type="datetime" placeholder="请选择" format="yyyy年MM月dd日" :confirm="true" v-model="formItem1.date"></DatePicker>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="到期日期" prop="type">
                            <DatePicker type="datetime" placeholder="请选择" format="yyyy年MM月dd日" :confirm="true" v-model="formItem1.date"></DatePicker>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :md="24" :lg="6">
                        <FormItem label="保单印刷号">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="6">
                        <FormItem label="总净保费" prop="type">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="总标准保费">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="总折扣">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="6">
                        <FormItem label="渠道代码">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :md="24" :lg="6">
                        <FormItem label="总净保费">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="6">
                        <FormItem label="总税额" prop="type">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="上年违章次数">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="3">
                        <FormItem label="出险次数">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="6">
                        <FormItem label="渠道名称">
                            <i-input >
                            </i-input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row style="padding:30px 0px;" class="billTab">
                    <Tabs type="card" :animated="false" v-model="tab">
                        <TabPane label="车辆信息" >
                            <Form :label-width="120" :model="formItem2" :rules="formItem2Valited" ref="formItem2" label-position="top" id="formItem2" v-if="tab==0">
                                <Row>
                                    <i-col :md="24" :lg="3">
                                        <FormItem label="车牌号" prop="num">
                                            <i-input v-model="ceshi.baodan"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="3">
                                        <FormItem label="采购价" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="3">
                                        <FormItem label="初登日期" prop="num">
                                            <DatePicker type="datetime" placeholder="请选择" format="yyyy年MM月dd日" :confirm="true" v-model="formItem2.date"></DatePicker>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="3">
                                        <FormItem label="是否过户车" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="车辆种类" prop="num">
                                            <Select v-model="formItem2.num">
                                                <Option value="1">1</Option>
                                            </Select>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="号牌底色" >
                                            <Select v-model="formItem2.num">
                                                <Option value="1">1</Option>
                                            </Select>
                                        </FormItem>
                                    </i-col>
                                </Row>
                                <Row>
                                    <i-col :md="24" :lg="3">
                                        <FormItem label="使用性持" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="3">
                                        <FormItem label="所属性质" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="发动机号" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="荷载质量(KG)" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="整备质量(KG)" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                </Row>
                                <Row>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="厂牌型号" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="车架号" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="座位" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="排量功率(L)" prop="num">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                </Row>

                            </Form>
                        </TabPane>
                        <TabPane label="关系人信息" >
                            <Form :label-width="120" :model="formItem3" :rules="formItem3Valited" ref="formItem3" label-position="top" id="formItem3" v-if="tab==1">
                                <Row style="padding:20px 0;border-bottom: 1px dotted #F1F1F1">
                                    <i-col :md="24" :lg="4" style="padding-left:50px;">
                                        <FormItem label="客户角色" prop="num" >
                                            <RadioGroup v-model="formItem3.num">
                                                <Radio label="1">被保险人</Radio>
                                                <Radio label="2">投保人</Radio>
                                                <Radio label="3">车主</Radio>
                                            </RadioGroup>
                                        </FormItem>
                                    </i-col>
                                    <i-col style="display: inline;" :lg="12"  :md="24">
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="客户姓名">
                                                <i-input v-model="ceshi.name"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="证件类型">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="客户类型">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="性别">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="手机号">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="证件号码">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="客户电话">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="性别">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                    </i-col>
                                    <i-col :md="24" :lg="{span:1,offset:6}">
                                        <FormItem label=" ">
                                                <span class="btnBox add">
                                                    <Icon type="plus" class=""></Icon>
                                                </span>
                                            <span class="btnBox close">
                                                    <Icon type="close"></Icon>
                                                </span>
                                        </FormItem>
                                    </i-col>
                                </Row>
                                <Row>
                                    <i-col span="24" style="margin:30px 0;text-align: center" @click="submit('formItem3')">
                                        <i-button type="primary" shape="circle" style="margin-right:20px;width:200px;">
                                            <Icon type="checkmark-circled"></Icon>
                                            &emsp;提交保单信息
                                        </i-button>
                                        <i-button  shape="circle" style="width:120px;background-color: #77B4F5;color:#FFF;" @click="reset('formItem3')">
                                            <Icon type="refresh"></Icon>
                                            &emsp;重置
                                        </i-button>
                                    </i-col>
                                </Row>
                            </Form>
                        </TabPane>
                        <TabPane label="保单明细" >
                            <div v-if="tab==2">
                                <div class="detail">
                                    <Row class="head">
                                        <i-col :md="12" :lg="12" style="padding-top: 5px;" >
                                            <Icon type="ios-list-outline" style="font-size:16px;"></Icon>
                                            主动条约
                                        </i-col>
                                        <i-col :md="12" :lg="{span:1,offset:10}" >
                                            <i-button type="primary">
                                                <Icon type="arrow-up-b"></Icon>
                                                折叠
                                            </i-button>
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th>选择 </th>
                                                <th>项目</th>
                                                <th>保额</th>
                                                <th>保单保费</th>
                                                <th>折扣</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>机动车损失保险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>机动车第三责任保险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>机动车全车盗抢保险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>司机座位责任险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>乘客座位责任险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </Row>
                                </div>
                                <div class="detail">
                                    <Row class="head">
                                        <i-col :md="12" :lg="12" style="padding-top: 5px;" >
                                            <Icon type="ios-list-outline" style="font-size:16px;"></Icon>
                                            不计免赔险
                                        </i-col>
                                        <i-col :md="12" :lg="{span:1,offset:10}" >
                                            <i-button type="primary">
                                                <Icon type="arrow-up-b"></Icon>
                                                折叠
                                            </i-button>
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th>选择 </th>
                                                <th>项目</th>
                                                <th>保额</th>
                                                <th>保单保费</th>
                                                <th>折扣</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>车损不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>三者不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>盗抢不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>乘客不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>基本险不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>车身划痕险不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>自燃不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>发动机涉水不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>新增加设备不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>车上货物不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>精神损害抚慰金不计免赔</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>不计免赔率险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </Row>
                                </div>
                                <div class="detail">
                                    <Row class="head">
                                        <i-col :md="12" :lg="12" style="padding-top: 5px;" >
                                            <Icon type="ios-list-outline" style="font-size:16px;"></Icon>
                                            附加险及其特约跳越
                                        </i-col>
                                        <i-col :md="12" :lg="{span:1,offset:10}" >
                                            <i-button type="primary">
                                                <Icon type="arrow-up-b"></Icon>
                                                折叠
                                            </i-button>
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th>选择 </th>
                                                <th>项目</th>
                                                <th>保额</th>
                                                <th>保单保费</th>
                                                <th>折扣</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>玻璃单独破碎险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>车身划痕损失险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>自燃损失险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>发动机涉水损失险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>指定修理厂险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>新增设备损失险</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <Checkbox ></Checkbox>
                                                </td>
                                                <td>车上货物损失</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </Row>
                                </div>
                            </div>
                        </TabPane>
                        <TabPane label="付款信息" >
                            <Form ref="formItem4" :rules="formItem4Valited" :model="formItem4" label-position="top"
                                  :label-width="120" id="formItem4">

                                <Row style="padding:20px 0;border-bottom: 1px dotted #F1F1F1">
                                    <i-col :md="24" :lg="4" style="padding-left:50px;">
                                        <FormItem label="出单角色" prop="num">
                                            <RadioGroup v-model="formItem3.num">
                                                <Radio label="1">全费出单</Radio>
                                                <Radio label="2">净费出单</Radio>
                                            </RadioGroup>
                                        </FormItem>
                                    </i-col>
                                    <i-col style="display: inline;" :lg="20" :md="24">
                                        <i-col :md="24" :lg="12">
                                            <FormItem label="下游佣金收款人">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="12">
                                            <FormItem label="付款方式">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="户名">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="银行">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="开户行">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="6">
                                            <FormItem label="账单">
                                                <i-input></i-input>
                                            </FormItem>
                                        </i-col>
                                    </i-col>
                                </Row>

                            </Form>
                        </TabPane >
                        <TabPane label="代刷卡信息" >
                            <Form ref="formItem5" :model="formItem5" :rules="formItem5Valited" id="formItem5" :label-position="top" :label-width="120">
                                <Row>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="户名">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="3">
                                        <FormItem label="银行">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="3">
                                        <FormItem label="开户行">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="账号">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="刷卡日期">
                                            <i-input></i-input>
                                        </FormItem>
                                    </i-col>
                                </Row>
                                <Row>
                                    <i-col :md="24" :lg="24">
                                        <FormItem label="刷卡备注">
                                            <i-input type="textarea" :rows="4"></i-input>
                                        </FormItem>
                                    </i-col>
                                </Row>

                            </Form>
                        </TabPane>
                        <TabPane label="代理信息" >

                        </TabPane>
                        <TabPane label="备注信息" >
                            <Form ref="formItem7" :id="formItem7" :rules="formItem7Valited">
                                <Row>
                                    <i-col span="24">
                                        <i-input type="textarea" :rows="4" v-model="ceshi.wenben"></i-input>
                                    </i-col>
                                </Row>
                                <Row style="margin-top:20px;">
                                    <i-col :md="24" :lg="6">
                                        <i-select>
                                            <i-option>123</i-option>
                                        </i-select>
                                    </i-col>
                                    <i-col :md="24" :lg="6" style="line-height:30px;color: #D4D5D4;">
                                            <span>
                                                <Icon type="information"></Icon>
                                                可标记备注类型，编辑完备注记得提交保单修改
                                            </span>
                                    </i-col>
                                    <i-col :md="24" :lg="{span:2,offset:10}">
                                            <span>
                                                <span class="btnBox add">
                                                    <Icon type="plus" class=""></Icon>
                                                </span>
                                                <span class="btnBox close">
                                                    <Icon type="close"></Icon>
                                                </span>
                                            </span>
                                    </i-col>
                                </Row>

                            </Form>
                        </TabPane>
                    </Tabs>
                </Row>
                <Row>
                    <i-col span="24" style="margin:30px 0;text-align: center">
                        <i-button type="primary" shape="circle" style="margin-right:20px;width:200px;" @click="submit">
                            <Icon type="checkmark-circled"></Icon>
                            &emsp;提交保单信息
                        </i-button>
                        <i-button  shape="circle" style="width:120px;background-color: #77B4F5;color:#FFF;" @click="reset('formItem2')">
                            <Icon type="refresh"></Icon>
                            &emsp;重置
                        </i-button>
                    </i-col>
                </Row>
            </Form>
            <div >

            </div>
        </div>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    export default {
        data(){
            return {
                tab:'',
                tabs:'',
                ceshi:{
                    baodan:'',
                    name:'',
                    wenben:''
                },
                formItem1:{
                    num:'',
                    type:''
                },
                formItem2:{
                    num:'',
                    date:''
                },
                formItem3:{
                    num:'',
                    date:''
                },
                formItem1Valited:{
                    num:[
                        {
                            required:true,
                            message:'工号不能为空'
                        }
                    ],
                    type:[
                        {
                            required:true,
                            message:'类型不能为空'
                        }
                    ]
                },
                formItem2Valited:{
                    num:[
                        {
                            required:true,
                            message:'车牌号不能为空'
                        }
                    ]
                },
                formItem3Valited:{
                    num:[
                        {
                            required:true,
                            message:'车牌号不能为空'
                        }
                    ]
                }
            }
        },
        components:{
            productTitle
        },
        methods:{
            reset(name){
                this.$refs[name].resetFields();
            },
            submit(){
                console.log(this.ceshi);
            },
            tabClick(){
                alert(this.tab);
            }
        }
    }
</script>

